<template>
    <div class="swiper">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in imgs" :key="item.bannerid">
                <!-- <router-link :to="item.link"><img :src="item.img" :alt="item.alt"></router-link> -->
                <a :href="item.link"><img :src="item.img" :alt="item.alt"></a>
            </van-swipe-item>
        </van-swipe>

    </div>
</template>

<script>

export default {
    data() {
        return {
            imgs: [

            ]
        }
    },
    created() {
        this.$http.get('/banner/list')
            .then(res => {
                if (res.data.code === '200') {
                    this.imgs = res.data.data.filter(item => item.flag)
                }
            })
    }
}

</script>
<style scoped>
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;


}

.swiper {
    padding: 5px;
    box-sizing: border-box;
}

img {
    width: 100%;
    height: 200px;
    display: block;
}

.my-swipe {
    border-radius: 20px;
    /* margin-top: 5px; */
}
</style>